<template>
	<view class="page content">
		<TopHead :title="'公告列表'"></TopHead>
		<view class="contBox">
			<view class="itembox" v-for="(item,index) in list" :key="index" @click="announcementDetails(item)">
				<view class="time"> {{item.createTime}}  <text v-if="item.readStauts==0	" class="dian"></text></view>
				<view class="title1">{{item.title}}</view>
				<view class="title2">查看详情 <uni-icons class="right" type="right" size="26"></uni-icons></view>
			</view>
		</view>
	</view>
</template>

<script>
	// import HotsellingList from '@/components/basics/hotSellingList.vue';
	// import KnowingFood from '@/components/basics/KnowingFood.vue';
	import TopHead from '../../components/topHead/topHead.vue';
	export default {
		components: {
			TopHead
		},
		data() {
			return {

				list: [], // 列表
				page: 1,
				pageSize: 20, // 
				total: 0, // 总数
				hotList: [], // 热销
			}
		},
		onLoad() {

		},
		onShow() {
			this.page = 1
			this.total = 0
			this.list = []
			this.initData()
		},
		onReachBottom() {
			// 触底分页
			console.log('触底')
			if (this.total > this.list.length) {
				this.page = parseInt(this.page) + 1
			}
		},
		methods: {
			// 数据请求示例
			initData() {
				let _this = this;
				let data={
					userId: uni.getStorageSync('id'),
					type: 2,
					page: this.page,
					pageSize: this.pageSize
				}
				_this.$http.fetchData({
					url: '/wechatApplet/customer/notice/',
					method: 'GET',
					data: data,
					success(res) {
					
						_this.list = [..._this.list, ...res.data.list]
						this.total = res.data.total
						
					}
				})
			},
			// 查看详情
			announcementDetails(item) {
				console.log(item.id)
				let id = item.id
				let paramsStr = `?id=${id}`
				uni.navigateTo({
					url: `/pages_category_page1/index/announcementDetails${paramsStr}`
				})
			},

		}
	}
</script>

<style scoped>
	.content {
		background: rgba(62, 122, 233, 0.05);
		padding-bottom: 60rpx;
	}

	.contBox {
		padding: 30rpx;
		padding-top: 196rpx;
	}

	.itembox {
		padding: 30rpx 20rpx;
		background: #ffffff;
		border-radius: 10rpx;
		box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(93, 69, 41, 0.25);
		margin-bottom: 20rpx;
	}

	.itembox .time {
		font-size: 24rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #c2c2c2;
		position: relative;
	}
	.itembox .time .dian {
		width: 16rpx;
		height: 16rpx;
		background: #e47917;
		border-radius: 50%;
		position: absolute;
		top: 50%;
		right: 0;
		margin-top: -8rpx;
	}

	.itembox .title1 {
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #22172a;
		margin-top: 32rpx;
		padding-bottom: 26rpx;
		border-bottom: 2rpx solid rgba(94,94,94,0.1);
	}

	.itembox .title2 {
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #5d4529;
		position: relative; 
		margin-top: 24rpx;
	}

	.itembox .title2 .right {
		position: absolute;
		right: 0;
		top: 50%;
		margin-top: -27rpx;
	}
</style>